<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <title>生成硬照</title>
    <link rel="stylesheet" href="lib/weui.min.css">
    <link rel="stylesheet" href="css/ry.css">
</head>
<body class="white-bg">

<div class="page ry-page-ot">
    <div class="page__bd ">
        <div class="page-ry-con act-top-menu-ot">
            <div class="act-top-menu "><!--class="active" 时 导航吸顶-->
                <ul class="cl">
                    <li class="act-menu">
                        <a href="index.html#huodongguize">
                            <div>
                                <p>活动<br />详情</p>
                                <i>》</i>
                            </div>
                        </a>
                    </li>
                    <li class="act-menu">
                        <a href="index.html#aozaoxinggonglue">
                            <div>
                                <p>凹造型<br />攻略</p>
                                <i>》</i>
                            </div>
                        </a>
                    </li>
                    <li class="act-menu active">
                        <a href="javascript:;">
                            <div>
                                <p>上传<br />硬照</p>
                                <i>》</i>
                            </div>
                        </a>
                    </li>
                    <li class="act-menu last">
                        <a href="listPond.html">
                            <div>
                                <p>完成</p>
                                <!--<i>》</i>-->
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="page-ry-con">
            <div class="zp-show-ot">
                <div class="zp-show-btn">
                    <img src="img/camera.png" alt=""  id="openSystemCameraBtn">
                </div>
                <div class="zp-show-in">
                    <img class="bigImg" src="img/bg1.jpg" alt=""><!--大图5：9-->
                    <img class="smallImg" src="img/timg3.jpeg" alt=""><!--小图4：3-->
                </div>
            </div>
            <p class="zp-show-tip">↑ 点击查看大图，长按大图可保存或转发图片</p>
            <div class="cq-ot">
                <div class="cq-in">
                    <div class="clipArea" id="clipArea"></div>
                    <div class="clipBtnGroup cl">
                        <a class="chooseImgBtn" href="javascript:;"><input class="chooseImgFile" type="file">选择照片</a>
                        <a class="clipImgBtn"  href="javascript:;">确定</a>
                    </div>
                    <!--<div id="view"></div>-->
                </div>
            </div>
            <div class="zp-show-list-ot cl">
                <div class="ry-gallery-ot">
                    <div class="ry-gallery-in">
                        <div class="ry-gallery-list active">
                            <img src="img/bg1.jpg" alt="">
                            <span class="ry-img-this"><img src="img/img-this.png" alt=""></span>
                        </div>
                        <div class="ry-gallery-list">
                            <img src="img/bg2.jpg" alt="">
                            <span class="ry-img-this"><img src="img/img-this.png" alt=""></span>
                        </div>
                        <div class="ry-gallery-list">
                            <img src="img/bg3.jpg" alt="">
                            <span class="ry-img-this"><img src="img/img-this.png" alt=""></span>
                        </div>
                        <div class="ry-gallery-list">
                            <img src="img/bg4.jpg" alt="">
                            <span class="ry-img-this"><img src="img/img-this.png" alt=""></span>
                        </div>
                        <div class="ry-gallery-list">
                            <img src="img/bg1.jpg" alt="">
                            <span class="ry-img-this"><img src="img/img-this.png" alt=""></span>
                        </div>
                        <div class="ry-gallery-list">
                            <img src="img/bg2.jpg" alt="">
                            <span class="ry-img-this"><img src="img/img-this.png" alt=""></span>
                        </div>
                        <div class="ry-gallery-list">
                            <img src="img/bg3.jpg" alt="">
                            <span class="ry-img-this"><img src="img/img-this.png" alt=""></span>
                        </div>
                        <div class="ry-gallery-list">
                            <img src="img/bg4.jpg" alt="">
                            <span class="ry-img-this"><img src="img/img-this.png" alt=""></span>
                        </div>
                    </div>
                </div>
                <div class="ry-gallery-tip">
                    》
                </div>
            </div>
        </div>
    </div>
    <!--下弹菜单-->
    <div>
        <div class="weui-mask" id="iosMask" style="display: none"></div>
        <div class="weui-actionsheet" id="iosActionsheet">
            <div class="weui-actionsheet__menu">
                <div class="weui-actionsheet__cell"><input type="file" capture="camera"  accept="image/image/jpeg,image/jpg,image/png" id="btn_camera" name="cameraInput"/>相机</div>
                <div class="weui-actionsheet__cell"><input type="file" accept="image/image/jpeg,image/jpg,image/png" id="btn_photo" name="cameraInput"/>相册</div>
            </div>
            <div class="weui-actionsheet__action">
                <div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
            </div>
        </div>
    </div>
    <!--查看大图-->
    <div class="page ry-big-gallery-ot">
        <div class="weui-gallery" style="display: block">
            <span class="weui-gallery__img">
                <img src="img/tx.jpeg" alt="">
            </span>
            <!--<div class="weui-gallery__opr">-->
                <!--<a href="javascript:" class="weui-gallery__del">-->
                    <!--<i class="weui-icon-delete weui-icon_gallery-delete"></i>-->
                <!--</a>-->
            <!--</div>-->
        </div>
    </div>
    <!--canvas合成图片-->
    <div class="canvas-to-img-ot">
        <canvas id="myCanvas" width="900" height="1620" style="width:80%;background: #000;margin-left: 10%;"></canvas>
        <!--<button id="dd">生成图片</button>-->
    </div>

</div>
</body>
</html>
<script src="lib/jquery-2.1.4-min.js"></script>

<script src="lib/PhotoClip/hammer.min.js"></script>
<script src="lib/PhotoClip/iscroll-zoom-min.js"></script>
<script src="lib/PhotoClip/lrz.all.bundle.js"></script>
<script src="lib/PhotoClip/PhotoClip.js"></script>
<script>

    $(function(){
        //导航点击切换
        $('.act-top-menu li.act-menu div').on('click', function(){
            var idx = $('.act-top-menu li.act-menu div').index(this);
            $(".act-top-menu li ").removeClass("active");
            $('.act-top-menu li.act-menu').eq(idx).addClass("active");
        });
        //背景图切换
        $('.ry-gallery-in .ry-gallery-list').on('click', function(){
            var idx = $('.ry-gallery-in .ry-gallery-list').index(this);
            var chooseBigImgSrc = $('.ry-gallery-in .ry-gallery-list>img').eq(idx).attr("src");
            //读取选择的背景图
            $('.bigImg').attr("src",chooseBigImgSrc);
            //当前选择的背景图高亮icon
            $('.ry-gallery-in  .ry-gallery-list').removeClass("active");
            $('.ry-gallery-in   .ry-gallery-list').eq(idx).addClass("active");
        });


        //裁切图部分↓↓↓
        var windowWid = $(window).width();
        var windowHei = $(window).height();
        //裁切画板的高度-按钮高度
        var galleryImgHei = $(".smallImg").height();
        $(".clipArea").height(windowHei);
//        $(".weui-gallery__img img").css("margin-top",(windowHei-galleryImgHei)/2);
        console.log(galleryImgHei);

        var pc = new PhotoClip('#clipArea', {
            size: [windowWid-40, (windowWid-40)/1.3333], // 截取框的宽和高组成的数组。默认值为[260,260]
            outputSize: [windowWid, windowWid/1.3333], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
            //adaptive: ['400', '300'],
            file: '.chooseImgFile',//选择图片的input
            view: '#view',//展示裁切后图片的容器
            ok: '.clipImgBtn',//裁切按钮
            //img: 'img/mm.jpg',
            outputType:'jpg',//输出图片类型。 可选 'jpg' 和 'png' 两种种类型，默认为 'jpg'
            loadStart: function() {
                console.log('开始读取照片');
            },
            loadComplete: function() {
                console.log('照片读取完成');
            },
            done: function(dataURL) {
                //获取到的裁切后的图片
                //console.log(dataURL);
                $(".smallImg").attr("src",dataURL);
            },
            loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
            clipFinish: function(dataURL) {}, // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
            fail: function(msg) {
                alert(msg);
            }
        });
//        // 加载的图片必须要与本程序同源，否则无法截图
        pc.load('img/tx.jpeg');
        //点击确定隐藏裁切框
        $(".clipImgBtn").on("click",function () {
            $(".cq-ot").hide();
        })


        //吊起相机拍照 选择照片部分
        var $iosActionsheet = $('#iosActionsheet');
        var $iosMask = $('#iosMask');

        function hideActionSheet() {
            $iosActionsheet.removeClass('weui-actionsheet_toggle');
            $iosMask.fadeOut(200);
        }
        //点取消或者点击其他地方隐藏下菜单
        $iosMask.on('click', hideActionSheet);
        $('#iosActionsheetCancel').on('click', hideActionSheet);
        //相机按钮点击时
        $("#openSystemCameraBtn").on("click", function(){
            $iosActionsheet.addClass('weui-actionsheet_toggle');
            $iosMask.fadeIn(200);
        });

        //相机
        $("#btn_camera").on("change",function () {
            var file = document.getElementById("btn_camera").files[0];
            var reader = new FileReader();
            reader.onload=function(e) {
                $(".smallImg").attr("src",e.target.result) ;

                //用户上传的图片的Src赋值给裁切框
                pc.load(e.target.result);
                $(".cq-ot").show();
                hideActionSheet();
            };
            reader.readAsDataURL(file);
        });
        //相册
        $("#btn_photo").on("change",function () {
            var file = document.getElementById("btn_photo").files[0];
            var reader = new FileReader();
            reader.onload=function(e) {
                $(".smallImg").attr("src",e.target.result) ;

                //用户上传的图片的Src赋值给裁切框
                pc.load(e.target.result);
                $(".cq-ot").show();
                hideActionSheet();
            };
            reader.readAsDataURL(file);
        });
        $(".ry-big-gallery-ot").on("click",function () {
            $(".weui-gallery__img img").attr("src","");
            $(".ry-big-gallery-ot").hide();
        });

        //最后一步 生成图片
        $(".zp-show-in").on("click",function () {
            //canvas合成图片部分
            //bg 5：9
            var canvas = document.getElementById('myCanvas');
            var fd = canvas.getContext('2d');


            var bigImgToCanvasSrc =  $(".bigImg").attr("src");//大图
            var smallImgToCanvasSrc =  $(".smallImg").attr("src");//小图

            //canvas背景图
            var imgBg = new Image();
            var leida = new Image();
            var qr = new Image();
            imgBg.src=bigImgToCanvasSrc;
            imgBg.onload = function(){
                fd.drawImage(imgBg,0,0,900,1620);
                //小图 4：3
                leida.src=smallImgToCanvasSrc;
                leida.onload = function(){
                    fd.drawImage(leida,250,600,400,300);
                    //qr
                    qr.src="img/tx.jpeg";
                    qr.onload = function(){
                        fd.drawImage(qr,700,1420,200,200);
                        setTimeout(function () {
                            doneCanvasSrc();//执行canvas To  Img
                        }, 100);
                    };
                };

                function doneCanvasSrc() {
                    var canvasSrc = canvas.toDataURL();
                    // 指定格式 jpg "image/jpg"
                    $(".ry-big-gallery-ot .weui-gallery__img img").attr("src",canvasSrc ) ;
                    $(".ry-big-gallery-ot").show();
                }

            };


        })
    });
</script>